import React from "react";
import {Tooltip, Checkbox} from 'antd';
import {validateListApi} from "../api/projectConfig";
import Qs from 'qs'
import {withRouter} from "react-router-dom";

class ValidateUnit extends React.Component {


    state = {}

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.cleanChild(() => {

            let that = this;
            setTimeout(function() {

                that.setState({});
                let {validateModel, initValue} = that.props;

                if (initValue) {
                    that.setState({...that.state, ...initValue});
                } else {
                    that.setState({...that.state, checked: false});
                }
            },300);
        })
    }

    onChangeValue = (e) => {
        let {validateModel} = this.props;
        var atype = 'add';

        let name = e.target.name;
        let value = e.target.value;
        let checked = e.target.checked;

        if(e.target.type == 'text') {
            this.state[name] = value;
            this.setState({...this.state});
        } else {
            this.setState({...this.state, checked: checked});
        }

        if( ! checked) {
            atype = 'remove'
        }

        var vals = [];
        for(var key in this.state) {
            if(key != 'checked') {
                vals.push(key + '=' + this.state[key]);
            }
        }
        let ret = validateModel.name + '(' + vals.join(',') + ')';

        this.props.onchangeVal(atype, ret);
    }

    render() {
        let {validateModel} = this.props;
        let {args, comment} = validateModel
        let paramsHtml = [];

        if(args) {
            let argsArr = eval(args);
            for(var value of argsArr){
                let validParams = value.split(':')
                var inputSize = 4
                if(validParams[1] == 'String') {
                    inputSize = 8
                }
                paramsHtml.push(
                    {name:validParams[0], type:validParams[1], size: inputSize}
                )
            }
        }

        return (
            <span className="validate-unit">
                <Checkbox key={validateModel.id}
                          name={validateModel.name}

                          checked={this.state.checked}

                          onChange={this.onChangeValue}
                          value={this.props.objectIndex}>
                    <Tooltip placement="top" title={comment}> {validateModel.name} </Tooltip>
                </Checkbox>

                {paramsHtml.map(value=>{
                    return <input key={Math.random()} placeholder={value.name}

                                  value={this.state[value.name]}

                                  onChange={this.onChangeValue}
                                  autoComplete="off"
                                  name={value.name}
                                  ptype={value.type}
                                  size={value.size} />
                })}
            </span>
        )
    }
}

// const _ValidatePanel = withRouter(Form.create()(ValidatePanel));
export default ValidateUnit